<script setup lang="ts">
import { RedoOutlined, MoreOutlined } from '@ant-design/icons-vue';

const activeKey: number = 0;
const panes = [
  {
    title: 'Tab 1111',
    key: 0,
  },
  {
    title: 'Tab 2222',
    key: 1,
  },
  {
    title: 'Tab 3333',
    key: 3,
  },
  {
    title: 'Tab 4444',
    key: 4,
  },
  {
    title: 'Tab 5555',
    key: 5,
  },
  {
    title: 'Tab 6666',
    key: 6,
  },
  {
    title: 'Tab 7777',
    key: 7,
  },
  {
    title: 'Tab 8888',
    key: 8,
  },
  {
    title: 'Tab 9999',
    key: 9,
  },
];

// 编辑
const onEdit = (targetKey: number, action: 'remove' | 'add') => {
  console.log(targetKey, action);
};
</script>

<template>
  <div class="global-tabs">
    <a-tabs v-model:activeKey="activeKey" hide-add type="editable-card" @edit="onEdit">
      <template #tabBarExtraContent>
        <div class="tabs-more">
          <MoreOutlined />
        </div>
      </template>
      <a-tab-pane v-for="pane of panes" :key="pane.key">
        <template #tab>
          {{ pane.title }}<RedoOutlined />
        </template>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<style lang="less" scoped>
.global-tabs {
  padding-top: 6px;
  background-color: #fff;
  .tabs-more {
    padding: 0 10px;
    cursor: pointer;
    font-size: 16px;
    margin-right: 8px;
  }
}
</style>
